<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>X证书区块链数据展示</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*"/>
    <link rel="stylesheet" href="public/javascripts/third/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="public/stylesheets/index.css" media="all">
    <script src="public/javascripts/third/jquery-1.10.2.min.js"></script>
    <script src="public/javascripts/third/layui/layui.js"></script>
</head>
<body>
<div class="page-container">
    <div class="page-header">
        <div class="header-item page-title">X证书区块链数据展示</div>
        <div class="header-tip">
            <span style="padding-right:10px;"><i class="layui-icon layui-icon-search"></i></span>搜索
        </div>
    </div>
    <div class="page-top">
        <div class="top-item">
            <span class="top-la">总用户数：</span>
            <span class="top-val" id="totalUser">--</span>
        </div>
        <div class="top-item">
            <span class="top-la">总块数：</span>
            <span class="top-val" id="totalBlock">--</span>
        </div>
        <div class="top-item">
            <span class="top-la">总交易数：</span>
            <span class="top-val" id="totalDeal">--</span>
        </div>
        <div class="top-item">
            <span class="top-la">总链条数：</span>
            <span class="top-val" id="totalChain">--</span>
        </div>
        <div class="top-item">
            <span class="top-la">总链码数：</span>
            <span class="top-val" id="totalCode">--</span>
        </div>
    </div>
    <div class="page-bottom">
        <div class="content-left">
            <div class="block-title">最新区块信息</div>
            <div class="left-item">
                <div class="left-la"><span><i class="layui-icon layui-icon-triangle-r"></i></span>块高度：</div>
                <div class="left-val" id="blockHeight">--</div>
            </div>
            <div class="left-item">
                <div class="left-la"><span><i class="layui-icon layui-icon-triangle-r"></i></span>块Hash：</br></div>
                <div class="left-val" id="blockHash">--
                </div>
            </div>
            <div class="left-item">
                <div class="left-la"><span><i class="layui-icon layui-icon-triangle-r"></i></span>前一块Hash：</br></div>
                <div class="left-val" id="prevHash">--
                </div>
            </div>
            <div class="left-item">
                <div class="left-la"><span><i class="layui-icon layui-icon-triangle-r"></i></span>块大小：</div>
                <div class="left-val" id="blockSize">--</div>
            </div>
            <div class="left-item">
                <div class="left-la"><span><i class="layui-icon layui-icon-triangle-r"></i></span>生成时间：</div>
                <div class="left-val" id="blockTime">--</div>
            </div>
            <div class="left-item">
                <div class="left-la"><span><i class="layui-icon layui-icon-triangle-r"></i></span>包含交易数：</div>
                <div class="left-val" id="blockDeal">--</div>
            </div>
            <div class="left-item">
                <div class="left-la"><span><i class="layui-icon layui-icon-triangle-r"></i></span>总交易数：</div>
                <div class="left-val" id="blockTotalDeal">--</div>
            </div>
            <div class="left-item">
                <div class="left-la"><span><i class="layui-icon layui-icon-triangle-r"></i></span>块最多包含交易数：</div>
                <div class="left-val" id="blockMaxDeal">--</div>
            </div>
        </div>
        <div class="content-right">
            <div class="right-top">
                <div class="top-box" style="width:100%;height: 100%;"></div>
                <div id="maxWrite"></div>
                <div id="maxRead"></div>
                <div id="writeTime"></div>
                <div id="readTime"></div>
            </div>
            <div class="right-bottom">
                <div class="bottom-box" style="width:100%;height: 100%;"></div>
                <div id="maxBlock"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="searchHtml">
    <div class="search-item">
        <select id="type" class="page-font">
            <option value="-1">请选择</option>
            <option value="0">区块高度</option>
            <option value="1">区块Hash</option>
            <option value="2">交易ID</option>
        </select>
        <input id="serachVal" type="text" class="layui-input page-font" maxlength="80" placeholder="请输入查询内容"/>
        <button type="button" class="layui-btn page-font" id="searchBtn">搜索</button>
    </div>
    <div class="search-content" style="display: none;">
        <div class="page-font">
            块高度：<span id="BlockNumber">--</span>
        </div>
        <div class="page-font">
            数据Hash：<span id="DataHash">--</span>
        </div>
        <div class="page-font">
            前一块Hash：<span id="PreviousHashID">--</span>
        </div>
        <div class="page-font">
            当前块Hash：<span id="CalculatedBlockHash">--</span>
        </div>
        <div class="page-font">
            块中包含交易数量：<span id="EnvelopeCount">--</span>
        </div>
        <div class="page-font">
            区块打包时间：<span id="Timestamp">--</span>
        </div>
        <div class="page-font">
            交易详情：
        </div>
        <div class="page-font" id="Envelopes">
        </div>
    </div>
</script>
<script src="public/javascripts/third/echarts.min.js"></script>
<script src="public/javascripts/index.js"></script>
</body>
</html>